<template>
	<view class="container">
		<view class="title">图片下载与显示</view>
		
		<button class="download-btn" @tap="downloadImage" :disabled="isDownloading">
			{{ isDownloading ? '下载中...' : '下载图片' }}
		</button>
		
		<view class="progress-bar" v-if="isDownloading">
			<view class="progress-fill" :style="{width: downloadProgress + '%'}"></view>
		</view>
		
		<view class="image-container" v-if="imagePath">
			<image class="downloaded-image" :src="imagePath" mode="widthFix"></image>
		</view>
		
		<view class="placeholder" v-else>
			<text>图片将在此处显示</text>
		</view>
		
		<view class="log-container">
			<view class="log-title">下载日志</view>
			<scroll-view class="log-content" scroll-y>
				<view class="log-entry" v-for="(log, index) in logs" :key="index">
					<text>{{ log }}</text>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isDownloading: false,
				downloadProgress: 0,
				imagePath: '',
				logs: []
			}
		},
		methods: {
			downloadImage() {
				this.isDownloading = true;
				this.downloadProgress = 0;
				this.imagePath = '';
				this.addLog('开始下载图片...');
				
				const imageUrl = 'https://cdn.pixabay.com/photo/2025/11/05/20/57/monastery-9939590_1280.jpg';
				
				this.addLog('图片地址: ' + imageUrl);
				uni.downloadFile({
					url: imageUrl,
					success: (res) => {
						if (res.statusCode === 200) {
							this.addLog('下载成功! 临时文件路径: ' + res.tempFilePath);
							this.imagePath = res.tempFilePath;
						} else {
							this.addLog('下载失败，状态码: ' + res.statusCode);
						}
						this.isDownloading = false;
					},
					fail: (err) => {
						this.addLog('下载失败: ' + JSON.stringify(err));
						this.isDownloading = false;
					}
				});
			},
			
			addLog(message) {
				const timestamp = new Date().toLocaleTimeString();
				this.logs.unshift(`[${timestamp}] ${message}`);
				if (this.logs.length > 50) {
					this.logs.pop();
				}
			}
		},
		
		onLoad() {
			this.addLog('页面加载完成，准备下载图片');
		}
	}
</script>

<style>
	.container {
		padding: 20px;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.title {
		text-align: center;
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 20px;
		color: #333;
	}
	
	.download-btn {
		background-color: #007AFF;
		color: white;
		border: none;
		padding: 12px 24px;
		border-radius: 8px;
		font-size: 16px;
		cursor: pointer;
		display: block;
		margin: 0 auto 20px;
		width: 80%;
		max-width: 300px;
	}
	
	.download-btn:disabled {
		background-color: #cccccc;
		cursor: not-allowed;
	}
	
	.image-container {
		text-align: center;
		margin-top: 20px;
	}
	
	.downloaded-image {
		max-width: 100%;
		max-height: 400px;
		border-radius: 8px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	}
	
	.placeholder {
		text-align: center;
		color: #999;
		padding: 40px 0;
	}
	
	.log-container {
		background-color: #f8f8f8;
		border-radius: 8px;
		padding: 10px;
		margin-top: 20px;
		max-height: 200px;
		overflow: hidden;
		border: 1px solid #e0e0e0;
	}
	
	.log-title {
		font-weight: bold;
		margin-bottom: 8px;
		font-size: 14px;
	}
	
	.log-content {
		max-height: 150px;
		font-family: monospace;
		font-size: 12px;
	}
	
	.log-entry {
		margin-bottom: 5px;
		padding: 3px 0;
		border-bottom: 1px dashed #e0e0e0;
	}
	
	.progress-bar {
		height: 6px;
		background-color: #e0e0e0;
		border-radius: 3px;
		margin: 10px 0;
		overflow: hidden;
	}
	
	.progress-fill {
		height: 100%;
		background-color: #007AFF;
		width: 0%;
		transition: width 0.3s;
	}
</style>